/** 
 * Project Name:sys-portal-Extjs 
 * File Name:MessageView.js 
 * Package Name: 
 * Author : 吴Yuan|小森森
 * Date:2019年9月19日下午12:13:43 
 * Copyright (c) 2019, 15909910367@163.com All Rights Reserved. 
 * 
 */
Ext.define('Jason.view.chat.MessageView', {
    extend: 'Ext.panel.Panel',
    xtype: 'messageView',
    ui: 'light',
    flex: 7,
    layout: 'border',
    dockedItems: [{
        xtype: 'toolbar',
        dock: 'top',
        style: 'background: #eceff1;height:45px;',
        items: [{
            xtype: 'label',
            style: 'font-weight:bold;font-size:18px;',
            itemId: 'reciver',
            reciverCode: '',
            text: 'To:'
        }]
    }],
    items: [{
        region: 'center',
        xtype: 'dataview',
        style: 'background:#ffffff',
        margin: '13 0 0 0',
        autoScroll: true,
        itemId: 'messageList',
        cls: 'chat active-chat',
        itemSelector: '.message-item',
        listeners: {
            render: function (messageList) {//数据加载后直接下拉到最低
                Ext.defer(function () { messageList.scrollBy(1, 2000); }, 200);
            }
        },
        itemTpl: new Ext.XTemplate('' +
            '<div class="bubble {sender:this.toOwner}">{content}</div>' +
            '', {
            toOwner: function (value) {
                if (value === cfg.sub.accountInfo.id) {
                    return 'me';
                } else {
                    return 'you';
                }
            }
        }
        ),
        store: {
            autoLoad: false,
            sortOnLoad: true,
            fields: ['reciver', 'sender', 'content', 'type', 'senderTime'],
            proxy: {
                type: 'ajax',
                url: cfg.requestUrl + 'main/app/localData/IM/message.json',
                reader: {
                    type: 'json',
                    rootProperty: 'list'
                }
            }
        }
    }, {
        region: 'south',
        dockedItems: [{
            xtype: 'toolbar',
            dock: 'top',
            style: 'background: #eceff1;',
            items: [{
                iconCls: 'fa fa-paperclip'
            }, '->', {
                iconCls: 'fa fa-clock-o',
                text: '聊天记录'
            }]
        }, {
            xtype: 'toolbar', dock: 'bottom',
            items: ['->', {
                text: '发送', iconCls: 'fa fa-paper-plane-o', ui: 'soft-green',
                handler: function (btn) {
                    var message = btn.up('panel').down('#messageField');
                    if (Ext.isEmpty(message.getValue())) {
                        EUtil.toastInfo('不能发送空白信息');
                        return;
                    }
                    var messageList = btn.up('messageView').down('#messageList');
                    var reciverCode = btn.up('messageView').down('#reciver').reciverCode;
                    if (Ext.isEmpty(reciverCode)) {
                        EUtil.toastInfo('请选择接收人');
                        return;
                    }
                    messageList.getStore().add({
                        'reciver': reciverCode,
                        'sender': cfg.sub.accountInfo.id,
                        'content': message.getValue(),
                        'type': 1,
                        'senderTime': new Date()
                    });
                    //发送消息
                    webSocketUtils.send({
                        'version': 1,
                        'command': 3,
                        'toUser': reciverCode,
                        'message': message.getValue()
                    });
                    messageList.scrollBy(1, 2000)
                    message.setValue('');
                }
            }]
        }],
        layout: 'fit',
        items: [{
            xtype: 'textarea', graw: true, maxLength: 500, flex: 1,
            itemId: 'messageField',
            fieldStyle: 'border:0px;'
        }],
        xtype: 'panel'
    }]
});